// components/step/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    listData:{
      type: Object,
      value: {}
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    dataList:[
      {'date':'2023-05-27','part':'上午','content':'使用微信小程序简单实现时间轴界面，代码简洁，逻辑清楚，适合刚入手准备学习微信小程序的伙伴们，简单分享下。一共分为以下四大步骤。'},
      {'date':'2023-05-28','part':'下午','content':'第一步：使用一个标签<view class="box"></view>，设置好内边距，以及在后续调整其他布局的时候，便于编写代码。如果喜欢将两边铺满屏幕的友友们，可以忽略此步骤。'},
      {'date':'2023-05-29','part':'晚上','content':'第二步：循环读取需要现实的数据内容，并再次使用一个标签<view class="box-line"></view>，此标签主要设置左边的竖线，使用左边框属性设置即可，并设置好内边距。'},
      {'date':'2023-05-30','part':'凌晨','content':'第三步：在标签<view class="box-line"></view>上方，加入标签<view class="point"></view>，用于编写圆点，并将其左边距(margin-left)属性设为负值，调整好自己喜欢的样式。'},
      {'date':'2023-05-31','part':'天黑','content':'第四步：在标签<view class="box-line"></view>内部，包入一个新的标签<view class="box-data"></view>，在这个标签里面设置好样式后，便可将循环出的数据，按照需求摆放，随意布局啦，想学习更多微信小程序的友友们，请至我的主页，分享界面示例，共同学习哦！'},
    ],
  },

  /**
   * 组件的方法列表
   */
  methods: {
    toDetail(e){
      wx.navigateTo({
        url: '/subPackages/pages/detail/detail?id='+e.currentTarget.dataset.id+'&type=policy'
      })
    }
  }
})
